﻿<script src="~/vue/dist/vue.global.js"></script>
<link href="~/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/element-plus/dist/index.full.js"></script>
<script src="~/axios/dist/axios.js"></script>
<html>
<head>
    <link href="~/css/table.css" rel="stylesheet" />
    <style scoped>
        .avatar-uploader .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

            .avatar-uploader .el-upload:hover {
                border-color: var(--el-color-primary);
            }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-form name="humanfileForm" method="post" ref="ruleFormRef"
                 :model="ruleForm"
                 label-width="120px"
                 class="demo-ruleForm">
            <table width="100%">
                <tr>
                    <td>
                        <font color="black">您正在做的业务是：人力资源--人力资源档案管理--人力资源档案复核 </font>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <el-radio-group v-model="ruleForm.checkStatus">
                            <el-radio value="已复核">通过</el-radio>
                            <el-radio value="未通过复核">不通过</el-radio>
                        </el-radio-group>
                        &nbsp;
                        &nbsp;
                        <el-button v-on:click="add()">提交</el-button>
                        <el-button v-on:click="reset()">清除</el-button>
                        <el-button v-on:click="close()">返回</el-button>
                    </td>
                </tr>
            </table>
            <table width="100%" border="1" cellpadding=3 cellspacing=1
                   bordercolorlight=#848284 bordercolordark=#eeeeee
                   class="TABLE_STYLE1">
                <tr>
                    <td class="TD_STYLE1">
                        档案编号
                    </td class="TD_STYLE2">
                    <td colspan="8">
                        <el-input v-model="ruleForm.humanId" readonly class="INPUT_STYLE2" size="small" />
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1" width="11%">
                        I级机构
                    </td>
                    <td width="14%" class="TD_STYLE2">
                        @* <el-form-item prop="FirstKind"> *@
                        <el-input v-model="ruleForm.firstKind.firstKindName" class="INPUT_STYLE2" size="small" readonly />
                        @* </el-form-item> *@
                    </td>
                    <td width="11%" class="TD_STYLE1">
                        II级机构
                    </td>
                    <td width="14%" class="TD_STYLE2">
                        <el-input v-model="ruleForm.secondKind.secondKindName" readonly class="INPUT_STYLE2" size="small"  />
                    </td>
                    <td width="11%" class="TD_STYLE1">
                        III级机构
                    </td>
                    <td class="TD_STYLE2" colspan="2">
                        <el-input v-model="ruleForm.thirdKind.thirdKindName" readonly class="INPUT_STYLE2" size="small"  />
                    </td>
                    <td rowspan="5" style="text-align: center; border: 1px solid; width: 178px; height: 178px;">
@*                         <el-upload class="avatar-uploader"
                                   :show-file-list="false"
                                   :on-success="handleAvatarSuccess"
                                   :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 178px; height: 178px;" />
                            <el-icon v-else class="avatar-uploader-icon">点击上传相片</el-icon>
                        </el-upload> *@
                        <el-form-item>
                            <label :class="'avatar-label'" style="position:relative;right:0px">
                                <el-avatar :src="ruleForm.humanPicture" :size="180" fit="cover"></el-avatar>
                            </label>
                            <!-- 添加的按钮 -->
                            <el-button type="primary" v-on:click="triggerFileInput" style="position:relative;right:-50px">上传头像</el-button>
                            <input id="avatarUpload" type="file" accept="image/*" v-on:change="onFileChange" style="display: none;" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        职位分类
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanMajorKind.humanMajorKindName" class="INPUT_STYLE2" size="small" readonly />
                    </td>
                    <td class="TD_STYLE1">
                        职位名称
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanMajor.humanMajorName" readonly class="INPUT_STYLE2" size="small" />
                    </td>
                    <td class="TD_STYLE1">
                        职称
                    </td>
                    <td colspan="2" class="TD_STYLE2">
                        <el-select v-model="ruleForm.humanProDesignation" placeholder="请选择职称" value-key="attributeName" style="width: 100%" size="small">
                            <el-option v-for="item in HumanProDesignation"
                                       :key="item.attributeName"
                                       :label="item.attributeName"
                                       :value="item.attributeName" />
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        姓名
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanName" class="INPUT_STYLE2" size="small" />
                    </td>
                    <td class="TD_STYLE1">
                        性别
                    </td>
                    <td class="TD_STYLE2">
                        <el-select v-model="ruleForm.humanSex" placeholder="请选择性别" style="width: 100%" size="small">
                            <el-option v-for="item in sex"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value" />
                        </el-select>
                    </td>
                    <td class="TD_STYLE1">
                        EMAIL
                    </td>
                    <td colspan="2" class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanEmail" class="INPUT_STYLE2" size="small" />
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        电话
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanTelephone" class="INPUT_STYLE2" size="small"oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
                    </td>
                    <td class="TD_STYLE1">
                        QQ
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanQQ" class="INPUT_STYLE2" size="small" oninput="this.value = this.value.replace(/[^0-9]/g, '')"/>
                    </td>
                    <td class="TD_STYLE1">
                        手机
                    </td>
                    <td colspan="2" class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanMobilephone" class="INPUT_STYLE2" size="small" oninput="this.value = this.value.replace(/[^0-9]/g, '')"/>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        住址
                    </td>
                    <td colspan="3" class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanAddress" class="INPUT_STYLE2" size="small" />
                    </td>
                    <td class="TD_STYLE1">
                        邮编
                    </td>
                    <td colspan="2" class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanPostcode" class="INPUT_STYLE2" size="small" />
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        国籍
                    </td>
                    <td class="TD_STYLE2">
                        <el-select v-model="ruleForm.humanNationality" placeholder="请选择国籍" value-key="attributeName" style="width: 100%" size="small">
                            <el-option v-for="item in HumanNationality"
                                       :key="item.attributeName"
                                       :label="item.attributeName"
                                       :value="item.attributeName" />
                        </el-select>
                    </td>
                    <td class="TD_STYLE1">
                        出生地
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanBirthplace" class="INPUT_STYLE2" size="small" />
                    </td>
                    <td class="TD_STYLE1">
                        生日
                    </td>
                    <td width="13%" class="TD_STYLE2">
                        <el-date-picker v-model="ruleForm.humanBirthday"
                            type="date"
                            placeholder="请选择出生日期"
                            :size="size" readonly/>
                    </td>
                    <td width="11%" class="TD_STYLE1">
                        民族
                    </td>
                    <td class="TD_STYLE2" width="14%">
                        <el-select v-model="ruleForm.humanRace" placeholder="请选择民族" value-key="attributeName" style="width: 100%" size="small">
                            <el-option v-for="item in HumanRace"
                                       :key="item.attributeName"
                                       :label="item.attributeName"
                                       :value="item.attributeName" />
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        宗教信仰
                    </td>
                    <td class="TD_STYLE2">
                        <el-select v-model="ruleForm.humanReligion" placeholder="请选择宗教信仰" value-key="attributeName" style="width: 100%" size="small">
                            <el-option v-for="item in HumanReligion"
                                       :key="item.attributeName"
                                       :label="item.attributeName"
                                       :value="item.attributeName" />
                        </el-select>
                    </td>
                    <td class="TD_STYLE1">
                        政治面貌
                    </td>
                    <td class="TD_STYLE2">
                        <el-select v-model="ruleForm.humanParty" placeholder="请选择政治面貌" value-key="attributeName" style="width: 100%" size="small">
                            <el-option v-for="item in HumanParty"
                                       :key="item.attributeName"
                                       :label="item.attributeName"
                                       :value="item.attributeName" />
                        </el-select>
                    </td>
                    <td class="TD_STYLE1">
                        身份证号码
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanIdCard" class="INPUT_STYLE2" size="small"  oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
                    </td>
                    <td class="TD_STYLE1">
                        社会保障号码
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanSocietySecurityId" class="INPUT_STYLE2" size="small" oninput="this.value = this.value.replace(/[^0-9]/g, '')"/>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        年龄
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanAge" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                    <td class="TD_STYLE1">
                        学历
                    </td>
                    <td class="TD_STYLE2">
                        <el-select v-model="ruleForm.humanEducatedDegree" placeholder="请选择学历" value-key="attributeName" style="width: 100%" size="small">
                            <el-option v-for="item in HumanEducatedDegree"
                                       :key="item.attributeName"
                                       :label="item.attributeName"
                                       :value="item.attributeName" />
                        </el-select>
                    </td>
                    <td class="TD_STYLE1">
                        教育年限
                    </td>
                    <td class="TD_STYLE2">
                        <el-select v-model="ruleForm.humanEducatedYears" placeholder="请选择教育年限" value-key="attributeName" style="width: 100%" size="small">
                            <el-option v-for="item in HumanEducatedYears"
                                       :key="item.attributeName"
                                       :label="item.attributeName"
                                       :value="item.attributeName" />
                        </el-select>
                    </td>
                    <td class="TD_STYLE1">
                        学历专业
                    </td>
                    <td class="TD_STYLE2">
                        <el-select v-model="ruleForm.humanEducatedMajor" placeholder="请选择学历专业" value-key="attributeName" style="width: 100%" size="small">
                            <el-option v-for="item in HumanEducatedMajor"
                                       :key="item.attributeName"
                                       :label="item.attributeName"
                                       :value="item.attributeName" />
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        薪酬标准
                    </td>
                    <td class="TD_STYLE2">
                        <el-select v-model="ruleForm.salaryStandard" placeholder="请选择薪酬标准" value-key="standardId" style="width: 100%" size="small">
                            <el-option v-for="item in SalaryStandard"
                                       :key="item.standardId"
                                       :label="item.standardName"
                                       :value="item" />
                        </el-select>
                    </td>
                    <td class="TD_STYLE1">
                        开户行
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanBank" class="INPUT_STYLE2" size="small" />
                    </td>
                    <td class="TD_STYLE1">
                        帐号
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanAccount" class="INPUT_STYLE2" size="small" oninput="this.value = this.value.replace(/[^0-9]/g, '')"/>
                    </td>
                    <td class="TD_STYLE1">
                        复核人
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.checker" class="INPUT_STYLE2" size="small" readonly />
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        复核时间
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.checkTime" readonly class="right-aligned-input" style="width: 100%;"></el-input>
                    </td>
                    <td class="TD_STYLE1">
                        特长
                    </td>
                    <td class="TD_STYLE2">
                        <el-select v-model="ruleForm.humanSpeciality" placeholder="请选择特长" value-key="attributeName" style="width: 100%" size="small">
                            <el-option v-for="item in HumanSpeciality"
                                       :key="item.attributeName"
                                       :label="item.attributeName"
                                       :value="item.attributeName" />
                        </el-select>
                    </td>
                    <td class="TD_STYLE1">
                        爱好
                    </td>
                    <td class="TD_STYLE2">
                        <el-select v-model="ruleForm.humanHobby" placeholder="请选择爱好" value-key="attributeName" style="width: 100%" size="small">
                            <el-option v-for="item in HumanHobby"
                                       :key="item.attributeName"
                                       :label="item.attributeName"
                                       :value="item.attributeName" />
                        </el-select>
                    </td>
                    <td class="TD_STYLE1">
                        &nbsp;
                    </td>
                    <td class="TD_STYLE2">
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        个人履历
                    </td>
                    <td colspan="7" class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanHistroyRecords"
                                  style="width: 100%"
                                  :rows="3"
                                  type="textarea" />
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        家庭关系信息
                    </td>
                    <td colspan="7" class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanFamilyMembership"
                                  style="width: 100%"
                                  :rows="3"
                                  type="textarea" />
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        备注
                    </td>
                    <td colspan="7" class="TD_STYLE2">
                        <el-input v-model="ruleForm.remark"
                                  style="width: 100%"
                                  :rows="3"
                                  type="textarea" />
                    </td>
                </tr>
            </table>
        </el-form>
    </div>
</body>
</html>
<script>
    window.userTrueName = '@ViewBag.UserTrueName'; // 将ViewBag的值赋给全局变量，方便Vue实例获取
    const { createApp, ref, reactive, computed, onMounted,watch } = Vue;
    const { ElMessage,ElNotification } = ElementPlus;
    var app = createApp({
        setup() {
            const ruleFormRef = ref(null);
            const ruleForm = reactive({
                hufId:"",//主键
                humanId:"",//档案编号
                firstKind: {},//一级机构，对象获取FirstKindId，FirstKindName
                secondKind: {},//二级机构，对象获取SecondKindId,SecondKindName
                thirdKind: {},//三级机构，对象获取ThirdKindId，ThirdKindName
                humanMajorKind:{},//职位分类，对象获取HumanMajorKindId，HumanMajorKindName
                humanMajor: {},//职位，对象获取HunmaMajorId,HunmaMajorName
                humanName: "",//姓名
                humanAddress:"",//地址
                humanPostcode:"",//邮政编码
                humanProDesignation:"",//职称
                humanTelephone:"",//电话
                humanMobilephone:"",//手机号码
                humanBank:"",//开户银行
                humanAccount:"",//银行账号
                humanQQ:"",//QQ号码
                humanEmail:"",//电子邮箱
                humanHobby:"",//爱好
                humanSpeciality:"",//特长
                humanSex:"",//性别
                humanReligion:"",//宗教信仰
                humanParty:"",//政治面貌
                humanNationality:"",//国籍
                humanRace:"",//民族
                humanBirthday:"",//出生日期/生日
                humanBirthplace:"",//出生地
                humanAge:"",//年龄
                humanEducatedDegree:"",//学历
                humanPicture:"",//相片
                humanEducatedYears:"",//教育年限
                humanEducatedMajor:"",//学习专业
                humanSocietySecurityId:"",//社会保障号码
                humanIdCard:"",//身份证号码
                remark:"",//备注
                salaryStandard:{},//薪酬标准，对象获取SalaryStandardId，SalaryStandardName,SalarySum
                humanHistroyRecords:"",//个人履历
                humanFamilyMembership:"",//家庭关系
                checkTime:"",//复核时间
                checker:window.userTrueName,//复核人
                humanFileStatus:"正常",//档案状态
                checkStatus:"已复核",//复核状态
                status:false
            })

            ruleForm.firstKind = "";//清空一级下拉框
            ruleForm.secondKind = "";//清二级下拉框
            ruleForm.thirdKind = "";//清空三级下拉框
            const CFFKOption = ref([])//一级机构下拉框数据
            const CFFKId = ref(null);//保存一级数据的id
            const CFSKOption = ref([]);//二级机构下拉框数据
            const CFSKId = ref(null);//保存二级数据的id
            const CFTKOption = ref([]);//三级机构下拉框数据

            ruleForm.humanMajor = "";//清空职位分类下拉框
            const CMKOption = ref([]);//保存职位分类下拉框数据
            const CMKId = ref(null);//保存职位分类数据的Id
            const CMOption = ref([]);//保存职位昵称下拉框数据
            var timi = ref(null);

            const HumanProDesignation = ref()//保存职称下拉框数据
            const sex = [
                {
                    value:"男",
                    label:"男"
                },
                {
                    value:"女",
                    label:"女"
                }
            ]
            const HumanNationality = ref()//保留国籍下拉框数据
            const HumanRace = ref()//保留民族下拉框数据
            const HumanReligion = ref()//保留宗教信仰下拉框数据
            const HumanParty = ref()//保留政治面貌下拉框数据
            const HumanEducatedDegree = ref()//保留学历下拉框数据
            const SalaryStandard = ref()//保留薪酬标准下拉框数据
            const HumanEducatedYears = ref()//保留教育年限下拉框数据
            const HumanEducatedMajor = ref()//保留学历专业下拉框数据
            const HumanSpeciality = ref()//保留特长下拉框数据
            const HumanHobby = ref()//保留爱好下拉框数据

            // 初始化时获取当前时间
            const tick = () => {
                const now = new Date();
                ruleForm.checkTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
                setTimeout(tick, 1000);
            };

            onMounted(() => {
                tick();
                ruleForm.checkTime = timi.value
            });

            const time = ref(new Date().toISOString());
            setInterval(() => {
                time.value = new Date().toISOString();
            }, 1000);

            function fill2(){
                axios.get("/HF/HFByIDAsync").then(res =>{
                    ruleForm.humanPicture = res.data.humanPicture
                    // imageUrl.value = res.data.humanPicture
                    ruleForm.firstKind = {
                        firstKindId: res.data.firstKindId,
                        firstKindName: res.data.firstKindName
                    };
                    ruleForm.secondKind = {
                        secondKindId: res.data.secondKindId,
                        secondKindName: res.data.secondKindName
                    };
                    ruleForm.thirdKind = {
                        thirdKindId: res.data.thirdKindId,
                        thirdKindName: res.data.thirdKindName
                    };
                    ruleForm.humanMajorKind = {
                        humanMajorKindId: res.data.humanMajorKindId,
                        humanMajorKindName: res.data.humanMajorKindName
                    };
                    ruleForm.humanMajor = {
                        humanMajorId: res.data.humanMajorId,
                        humanMajorName: res.data.humanMajorName
                    };
                    ruleForm.salaryStandard = {
                        standardId : res.data.salaryStandardId,
                        standardName : res.data.salaryStandardName,
                        salarySum : res.data.salarySum
                    };
                    ruleForm.humanId = res.data.humanId
                    ruleForm.hufId = res.data.hufId
                    ruleForm.humanProDesignation = res.data.humanProDesignation
                    ruleForm.humanName = res.data.humanName
                    ruleForm.humanSex = res.data.humanSex
                    ruleForm.humanEmail = res.data.humanEmail
                    ruleForm.humanMobilephone = res.data.humanMobilephone
                    ruleForm.humanTelephone = res.data.humanTelephone
                    ruleForm.humanQQ = res.data.humanQQ
                    ruleForm.humanAddress = res.data.humanAddress
                    ruleForm.humanPostcode = res.data.humanPostcode
                    ruleForm.humanNationality = res.data.humanNationality
                    ruleForm.humanBirthplace = res.data.humanBirthplace
                    ruleForm.humanBirthday = res.data.humanBirthday
                    ruleForm.humanRace = res.data.humanRace
                    ruleForm.humanReligion = res.data.humanReligion
                    ruleForm.humanParty = res.data.humanParty
                    ruleForm.humanIdCard = res.data.humanIdCard
                    ruleForm.humanSocietySecurityId = res.data.humanSocietySecurityId
                    ruleForm.humanAge = res.data.humanAge
                    ruleForm.humanEducatedDegree = res.data.humanEducatedDegree
                    ruleForm.humanEducatedYears = res.data.humanEducatedYears
                    ruleForm.humanEducatedMajor = res.data.humanEducatedMajor
                    ruleForm.humanBank = res.data.humanBank
                    ruleForm.humanAccount = res.data.humanAccount
                    ruleForm.humanHobby = res.data.humanHobby
                    ruleForm.humanSpeciality = res.data.humanSpeciality
                    ruleForm.humanHistroyRecords = res.data.humanHistroyRecords
                    ruleForm.humanFamilyMembership = res.data.humanFamilyMembership
                    ruleForm.remark = res.data.remark
                    ruleForm.status = false
                }).catch(error =>{
                    console.info(error)
                })
            }
            fill2()
            //查询下拉框数据
            function fill(){
                axios.get("/HF/ZCSelect").then(res =>{
                    HumanProDesignation.value = res.data
                }).catch(error =>{
                    console.info(error)
                })
                axios.get("/HF/GJSelect").then(res =>{
                    HumanNationality.value = res.data
                }).catch(error =>{
                    console.info(error)
                })
                axios.get("/HF/MZSelect").then(res =>{
                    HumanRace.value = res.data
                }).catch(error =>{
                    console.info(error)
                })
                axios.get("/HF/ZJXYSelect").then(res =>{
                    HumanReligion.value = res.data
                }).catch(error =>{
                    console.info(error)
                })
                axios.get("/HF/ZZMMSelect").then(res =>{
                    HumanParty.value = res.data
                }).catch(error =>{
                    console.info(error)
                })
                axios.get("/HF/XLSelect").then(res =>{
                    HumanEducatedDegree.value = res.data
                }).catch(error =>{
                    console.info(error)
                })
                axios.get("/HF/XCBZSelect").then(res =>{
                    SalaryStandard.value = res.data
                }).catch(error =>{
                    console.info(error)
                })
                axios.get("/HF/JYNXSelect").then(res =>{
                    HumanEducatedYears.value = res.data
                }).catch(error =>{
                    console.info(error)
                })
                axios.get("/HF/XLZYSelect").then(res =>{
                    HumanEducatedMajor.value = res.data
                }).catch(error =>{
                    console.info(error)
                })
                axios.get("/HF/TCSelect").then(res =>{
                    HumanSpeciality.value = res.data
                }).catch(error =>{
                    console.info(error)
                })
                axios.get("/HF/AHSelect").then(res =>{
                    HumanHobby.value = res.data
                }).catch(error =>{
                    console.info(error)
                })
            }
            fill()

            // //上传相片
            // const imageUrl = ref('')
            // const selectedFile = ref(null);//用来存储图片
            // // 上传成功回调
            // const handleAvatarSuccess = (response, uploadFile) => {
            //   imageUrl.value = URL.createObjectURL(uploadFile.raw);
            // };

            // // 上传前校验
            // const beforeAvatarUpload = (rawFile) => {
            //   if (rawFile.type !== 'image/jpeg') {
            //     ElMessage.error('Avatar picture must be JPG format!');
            //     return false;
            //   } else if (rawFile.size / 1024 / 1024 > 2) {
            //     ElMessage.error('Avatar picture size can not exceed 2MB!');
            //     return false;
            //   }
            //   imageUrl.value = URL.createObjectURL(rawFile);//显示预览
            //   selectedFile.value = rawFile;
            //   return true;
            // };

            //添加
            function add() {
                let submitData = {};
                // const formData = new FormData();
                // // 添加其他表单数据
                // for (const key in ruleForm) {
                //     formData.append(key, ruleForm[key]);
                // }
                // // 添加图片数据
                // if (selectedFile.value) {
                //     formData.append('image', selectedFile.value);
                // }
                // axios.post('/HF/Upload', formData)
                // .then(response => {
                    // 假设后端返回的数据结构中有一个字段叫imageUrl表示图片最终地址
                    //ruleForm.humanPicture = response.data;
                    for (const key in ruleForm) {
                        if (key !== 'firstKind' && key !== 'humanMajor' && key !== 'humanMajorKind' && key !== 'salaryStandard' && key !== 'secondKind' && key !== 'thirdKind') {
                            submitData[key] = ruleForm[key];
                        }
                    }
                    if ((ruleForm.firstKind && ruleForm.firstKind.firstKindId) && (ruleForm.firstKind && ruleForm.firstKind.firstKindName)) {
                        submitData.firstKindId = ruleForm.firstKind.firstKindId;
                        submitData.firstKindName = ruleForm.firstKind.firstKindName;
                    }
                    if ((ruleForm.secondKind && ruleForm.secondKind.secondKindId) && (ruleForm.secondKind && ruleForm.secondKind.secondKindName)) {
                        submitData.secondKindId = ruleForm.secondKind.secondKindId;
                        submitData.secondKindName = ruleForm.secondKind.secondKindName;
                    }
                    if ((ruleForm.thirdKind && ruleForm.thirdKind.thirdKindId) && (ruleForm.thirdKind && ruleForm.thirdKind.thirdKindName)) {
                        submitData.thirdKindId = ruleForm.thirdKind.thirdKindId;
                        submitData.thirdKindName = ruleForm.thirdKind.thirdKindName;
                    }
                    if ((ruleForm.humanMajorKind && ruleForm.humanMajorKind.humanMajorKindId) && (ruleForm.humanMajorKind && ruleForm.humanMajorKind.humanMajorKindName)) {
                        submitData.humanMajorKindId = ruleForm.humanMajorKind.humanMajorKindId;
                        submitData.humanMajorKindName = ruleForm.humanMajorKind.humanMajorKindName;
                    }
                    if ((ruleForm.humanMajor && ruleForm.humanMajor.humanMajorId) && (ruleForm.humanMajor && ruleForm.humanMajor.humanMajorName)) {
                        submitData.humanMajorId = ruleForm.humanMajor.humanMajorId;
                        submitData.humanMajorName = ruleForm.humanMajor.humanMajorName;
                    }
                    if ((ruleForm.salaryStandard && ruleForm.salaryStandard.standardId) && (ruleForm.salaryStandard && ruleForm.salaryStandard.standardName)) {
                        submitData.salaryStandardId = ruleForm.salaryStandard.standardId;
                        submitData.salaryStandardName = ruleForm.salaryStandard.standardName;
                        submitData.salarySum = ruleForm.salaryStandard.salarySum;
                        submitData.demandSalaraySum = ruleForm.salaryStandard.salarySum;
                        submitData.paidSalarySum = ruleForm.salaryStandard.salarySum;
                    }
                    axios.put("/HF/HFReviewAsync",{
                        hF:submitData
                    }, {
                        headers: {
                            "content-type": "application/x-www-form-urlencoded",
                            //或其他格式
                        }
                    }).then(res =>{
                        console.info(res.data)
                        if (res.data > 0){
                            ElMessage({
                                type: 'success',
                            message: '复核成功！'});
                            setInterval(() => {
                            close()
                            }, 1000);
                        }else{
                            ElMessage({
                            type: 'error',
                            message: '复核失败！'});
                        }
                    }).catch(error =>{
                        console.info(error)
                    })

                // })
                // .then(finalResponse => {
                //       console.log('完整业务处理成功', finalResponse.data);
                // })
                // .catch(error => {
                //       //console.error('上传或业务处理失败', error);
                //      console.error('请求出错:', error);
                //     if (error.response) {
                //         // 请求已发送，但服务器响应的状态码不在 2xx 范围内
                //         console.error('响应状态码:', error.response.status);
                //         console.error('响应数据:', error.response.data);
                //     } else if (error.request) {
                //         // 请求已发送，但没有收到响应
                //         console.error('没有收到响应:', error.request);
                //     } else {
                //         // 在设置请求时发生错误
                //         console.error('请求设置出错:', error.message);
                //     }
                // });
            }

            //清除
            function reset(){
                // imageUrl.value = "";
                fill2();
                // for (const key in ruleForm) {
                //     // 跳过登记时间和登记人属性
                //     if (key === 'checker' || key === 'checkTime' || key === 'firstKind' || key === 'humanMajor' || key === 'humanMajorKind' || key === 'secondKind' && key === 'thirdKind') {
                //         continue;
                //     }
                //     if (typeof ruleForm[key] === 'object' && ruleForm[key]!== null) {
                //         // 如果属性是对象，重置为空对象
                //         ruleForm[key] = {};
                //     } else {
                //         // 如果属性是基本类型，重置为空字符串或默认值
                //         if (key === 'humanFileStatus') {
                //             ruleForm[key] = "正常";
                //         } else if (key === 'checkStatus') {
                //             ruleForm[key] = "已复核";
                //         } else {
                //             ruleForm[key] = "";
                //         }
                //     }
                // }
            }

            function close(){
                window.location.href = "/HF/HFReview"
            }

            //当身份证失去焦点时截取出生年月日
            function handleBlur(){
                const now = new Date();
                let year = now.getFullYear()
                let idCard = ruleForm.humanIdCard.substring(6,14)
                // 将字符串分割成年、月、日
                let year2 = idCard.substring(0, 4);
                let month = idCard.substring(4, 6);
                let day = idCard.substring(6, 8);
                // 转换为 yyyy-MM-DD 格式
                ruleForm.humanBirthday = `${year}-${month}-${day}`;
                ruleForm.humanAge = year - year2
            }

            watch(() => ruleForm.humanIdCard, (newVal) => {
                if (newVal && newVal.length === 18) { // 确保身份证号长度正确
                    const birthDateStr = `${newVal.substring(6, 10)}-${newVal.substring(10, 12)}-${newVal.substring(12, 14)}`;
                    const birthDate = new Date(birthDateStr);
                    const isValidDate = !isNaN(birthDate.getTime()); // 检查是否为有效日期

                    if (isValidDate) {
                        // 更新生日
                        ruleForm.humanBirthday = birthDateStr;

                        // 计算年龄
                        const today = new Date();
                        let age = today.getFullYear() - birthDate.getFullYear();
                        const m = today.getMonth() - birthDate.getMonth();
                        if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
                            age--;
                        }

                        // 更新年龄
                        ruleForm.humanAge = age;
                    }
                } else {
                    // 如果不是有效的身份证号格式，则清空生日和年龄
                    ruleForm.humanBirthday = '';
                    ruleForm.humanAge = null;
                }
            });

                        //长富的代码
            const avatarUrl = ref('默认图片链接'); // 设置默认图片链接

            const triggerFileInput = () => {
                document.getElementById('avatarUpload').click();
            };

            const onFileChange = async (e) => {
                const file = e.target.files[0];
                if (!file) return;

                // 显示本地预览
                avatarUrl.value = URL.createObjectURL(file);

                // 准备FormData对象
                const formData = new FormData();
                formData.append('avatar', file);

                try {
                    // 发送POST请求上传文件
                    const response = await fetch('/ER/UploadAvatar', { // 注意这里的路径需要匹配后端路由
                        method: 'POST',
                        body: formData,
                    });

                    if (response.ok) {
                        const result = await response.json(); // 假设服务器返回包含文件路径的信息
                        const serverFilePath = result.filePath; // 从服务器响应中获取文件路径

                        // 更新avatarUrl为服务器上的实际路径
                        avatarUrl.value = serverFilePath

                        ruleForm.humanPicture = serverFilePath
                        console.info(ruleForm)

                        ElNotification({
                            title: '成功',
                            message: '头像上传成功',
                            type: 'success',
                        });
                    } else {
                        console.error('文件上传失败:', response.statusText);
                        ElNotification({
                            title: '错误',
                            message: '头像上传失败，请重试。',
                            type: 'error',
                        });
                    }
                } catch (error) {
                    console.error('发生错误:', error);
                    ElNotification({
                        title: '错误',
                        message: '发生了意外错误，请稍后再试。',
                        type: 'error',
                    });
                }
            };


            return {
                ruleForm,ruleFormRef,CFFKOption,CFFKId,CFSKOption,CFSKId,CFTKOption,CMKOption,CMKId,CMOption,timi,
                HumanProDesignation,sex,HumanNationality,HumanRace,HumanReligion,HumanParty,HumanEducatedDegree,SalaryStandard,
                HumanEducatedYears,HumanEducatedMajor,HumanSpeciality,HumanHobby,
                add,reset,close,handleBlur,triggerFileInput,onFileChange,avatarUrl
            }
        }
    })
    app.use(ElementPlus)
    app.mount("#app");
</script>
<style>
    .el-form-item__content {
        margin-left: 0px !important;
    }
</style>